<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width:100px;
            height: 100px;
            background: red;
            position: absolute; /* 第一步：给元素设置绝对定位，相对于整体页面  */
            top:30px;
            left:8px;
        }
    </style>
</head>
<body>
    <button>div运动向左</button>
    <button>div运动向右</button>
    <button>div运动向下</button>
    <button>div运动向上</button>
    <div></div>
    <div></div>
    <script src="common/Style.js"></script>
    <script src="common/move.js"></script>
    <!--
        外部文件调用顺序：取决于后面文件中是否有用到前面文件中的函数，如果有那么将被引入的文件先调用
    -->
    <script>
        //当点击按钮控制div向前走
        var btn = document.getElementsByTagName("button");
        var div = document.getElementsByTagName("div");
        // var timer = null;
        btn[0].onclick = function(){
            //调用函数
            move(div[0],"left",10,8);
        }
        btn[1].onclick = function(){
            move(div[0],"left",10,500);
        }
        btn[2].onclick = function(){
            move(div[1],"top",10,500);
        }
        btn[3].onclick = function(){
            move(div[1],"top",10,30);
        }
        //总结：如果操作的是多个元素的话，
        //那么直接清除定时器，相当于只要有一个元素正在运行，
        //再次操作其他元素的时候会将当前正在运动的元素停，原因是因为多个元素共用了一个定时器
    </script>
</body>
</html>